<template>
  <div class="achievement">
    <div class="achievement-header clearfix">
      <ul class="date fr" @click="showData">
        <li class="date_time" :class="info=='按条件查询'?'':'active'">
          <span>按条件查询</span>
          <svg-icon icon-class="icon_right" class="date-hide"></svg-icon>
        </li>
      </ul>
    </div>
    <div class="achievement-content">
      <ul class="lists">
        <li class="list">
          <span class="fl">5种类型订单金额(元)</span>
          <span class="fr">{{dateInfo.detail.five_amount || '0.00'}}</span>
        </li>
        <li class="list">
          <span class="fl">分红等级</span>
          <span class="fr">{{dateInfo.detail.bonus_rank || ''}}</span>
        </li>
        <li class="list">
          <span class="fl">当月奖励(元)</span>
          <span class="fr">{{dateInfo.detail.reward || '0.00'}}</span>
        </li>
      </ul>
    </div>
    <date-pop
            @cancel="cancelTime"
            @confirm="selectTime"
            :current="current"
            :timeData="dateInfo"
            v-if="show_date"
    ></date-pop>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Popup } from 'vant'
  import datePop from '@/views/user/components/datePop'
  import { dzGetbonusFive } from '@/api/dz/dzApi'

  Vue.use(Popup)
  export default {
    data() {
      return {
        dateInfo: {
          year: {},
          quarter: {},
          month: {},
          detail: {}
        },
        dls_rank_name: null,
        total_commission: null,
        items: [
          {
            name: '月',
            code: 1,
            type: 'month'
          },
          {
            name: '季度',
            code: 2,
            type: 'quarter'
          },
          {
            name: '年',
            code: 0,
            type: 'default'
          }
        ],
        current: 1,
        type: 'month',
        show_date: false,
        info: '',
        dls_degrade_check: '',
        dls_downgrade: '',
        personal_consume: ''
      }
    },
    created() {
      this.getTime()
      this.init()
    },
    methods: {
      init() {
        /* eslint-disable */
        const value =
                this.current == 1
                        ? this.dateInfo.currentMonth
                        : this.current == 2
                        ? this.dateInfo.currentQuarter
                        : ''
        /* eslint-enable */

        const data = {
          type: this.type,
          value,
          year: this.dateInfo.currentYear
        }

        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)

        dzGetbonusFive(data).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.dateInfo.year = res.data.year_list
            this.dateInfo.month = res.data.month_list
            this.dateInfo.quarter = res.data.quarter
            this.dateInfo.detail = res.data.detail
            if (!this.dateInfo.detail) {
              this.dateInfo.detail = {}
              this.dateInfo.detail.five_amount = '0.00'
              this.dateInfo.detail.bonus_rank = ''
              this.dateInfo.detail.reward = '0.00'
            }
          } else {
            this.$Error(res.msg)
          }
        })
      },
      // 获取当前年份、月份、嫉妒
      getTime() {
        const time = new Date()
        const currentYear = time.getFullYear()
        const currentMonth = time.getMonth() + 1
        const currentQuarter = Math.ceil(currentMonth / 3)
        this.dateInfo.currentYear = currentYear
        this.dateInfo.currentMonth = currentMonth
        this.dateInfo.currentQuarter = currentQuarter
      },
      selectItem(code, type) {
        this.cancelTime()
        this.current = code
        this.type = type
        this.init()
      },
      showData() {
        this.show_date = true
      },
      selectTime(e) {
        this.dateInfo.currentYear = e.selectYear
        this.dateInfo.currentMonth = e.selectMonth
        this.dateInfo.currentQuarter = e.selectQuarter
        this.show_date = false
        this.init()
      },
      cancelTime() {
        this.show_date = false
      }
    },
    components: {
      datePop
    }
  }
</script>

<style lang="scss">
  @import 'src/styles/variables';
  @import 'src/styles/mixin';
  @import "src/styles/user/yejiStyle/index";
</style>
